<template>
	<view class="protect">

		<view class="personList bg-lx-blue">
			<view class="text-center text-white" style="line-height: 88upx;">我的</view>
			<view class="shadow shadow-lg  personLists">
				<view class="perListsTop ">
					<image mode="aspectFill" src="../../static/head.png" style="width:64px;height:64px;"></image>
					<view class="info">
						<view class="name text-white">
							{{vuex_user.Name|NoPassByMobile}}
						</view>
						<view v-if="!vuex_token" @tap="gologin" class="name text-white text-white">
							点击登录
						</view>
						<view v-if="vuex_user.Vip" class="time">
							会员到期时间：<text>{{vuex_user.ExpirationTime|DateFormat}}</text>
						</view>
					</view>
				</view>
				<!-- <view class="setting">
					<image mode="aspectFill" :src="`../../static/shezhi.svg`" @click="showAction" style="width:26px;height:25px;"></image>
				</view> -->
			</view>
		</view>
		<view class="myimg">
			<image @tap="govip" :src="`../../static/vip_big.svg`" mode="scaleToFill" style="width:345px;height:150px;">
			</image>
		</view>
		<view style="margin-top: 240upx;">
			<view class="cu-form-group" @tap="govip">
				<view class="left">
					<u-icon name="red-packet" color="#f37b1d" size="28"></u-icon>
					<view class="title tf">用户订阅</view>
				</view>

				<text class="lg text-gray cuIcon-right"></text>
			</view>

			<view class="cu-form-group" @tap="goqa">
				<view class="left">
					<text class="lg text-orange cuIcon-phone"></text>
					<view class="title tf">在线反馈</view>
				</view>

				<text class="lg text-gray cuIcon-right"></text>
			</view>
			<!-- 	<view @tap="deleteAccout" class="cu-form-group">
					<view class="left">
						<text class="lg text-orange cuIcon-share"></text>
						<view class="title tf">注销帐号</view>
					</view>
					<text class="lg text-gray cuIcon-right"></text>
				</view> -->
			<view class="cu-form-group" @tap="shareWx">
				<view class="left">
					<text class="lg text-orange cuIcon-share"></text>
					<view class="title tf">分享好友</view>
				</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>


		</view>

		<view class="addPerson" v-if="vuex_token">
			<button class="cu-btn bg-orange lg " style="width: 200px;" @tap="logout"> 退出登录 </button>
		</view>
		<view class="text-center u-m-t-60">
			<text class="xie_yi" @tap="open_doc(1)">《用户协议》</text>及<text class="xie_yi" @tap="open_doc(2)">《隐私政策》</text>
		</view>
		<view v-if="user.Vip" class=" text-gray text-center u-font-sm margin-top">
			北京领讯科技有限公司版权所有
		</view>
		<page-tabpars></page-tabpars>
	</view>

</template>

<script>
	import userXieYi from '@/data/userXieYi'
	import privacy_policy from '@/data/privacy_policy'
	export default {
		data() {
			return {
				user: {},
			};
		},
		methods: {
			logout() {
				uni.removeStorageSync('axtoken')
				uni.removeStorageSync('userInfo')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			async shareWx() {
				if (this.$store.state.vuex_token) {
					let mobile = this.$store.state.vuex_user.NickName
					let shareOPtions = {
						provider: 'weixin',
						scene: 'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
						type: 0,
						success: (e) => {
							console.log('success', e);
							// this.$u.toast('分享成功');
						},
						fail: (e) => {
							console.log('fail', e)
						},
						complete: function() {
							console.log('分享完成')
						}
					}
					shareOPtions.summary = "3D高清实景游览-足不出户看家乡风景"
					shareOPtions.imageUrl = this.image;
					shareOPtions.title = `${mobile}邀请您赏美景`
					shareOPtions.href = `http://www.codetime.com.cn/download.html?phone=${mobile}`;
					// if (shareOPtions.type === 0 && plus.os.name === 'iOS') { //如果是图文分享，且是ios平台，则压缩图片 
					// 	shareOPtions.imageUrl = await this.compress();
					// }
					// if (shareOPtions.type === 1 && shareOPtions.provider === 'qq') { //如果是分享文字到qq，则必须加上href和title
					// 	shareOPtions.href = 'https://uniapp.dcloud.io';
					// 	shareOPtions.title = '欢迎体验uniapp';
					// }
					uni.share(shareOPtions);
				} else {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			},

			gologin() {
				this.$goWindow('../login/login')
			},
			goqa() {
				this.$goWindow('/pages/sugmsg/sugmsg')
			},
			// 打开用户协议
			open_doc(state) {
				if (state === 1) {
					uni.showModal({
						title: '用户协议',
						content: userXieYi,
						showCancel: false
					})
				} else if (state === 2) {
					uni.showModal({
						title: '隐私政策',
						content: privacy_policy,
						showCancel: false
					})
				}
			},

			govip() {
				this.$goWindow('../vip/vip')
			}

		},
		mounted() {},
		onShow() {
			this.$u.vuex('active', 'my');
		},
		onLoad() {},

	}
</script>

<style scoped>
	.xie_yi {
		color: #108EE9;
	}

	.bg-lx-blue {
		background-image: linear-gradient(top, #0081ff, #1cbbb4);
	}

	.myimg {
		/* padding-left: 20upx; */
		position: absolute;
		width: 100%;
		text-align: center;
		top: 240upx;
	}

	.menu-form {
		margin-top: 240upx;
	}

	.bottom {
		position: absolute;
		bottom: 10%;
		left: 5%;
		width: 90%;
	}

	.tf {
		margin-left: 10upx;
	}

	.left {
		display: flex;
		align-items: center;
	}

	.page {
		height: 100vh;
	}

	.addPerson {
		text-align: center;
		margin-top: 50upx;
	}

	.personLists {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 20upx 80upx 20upx;
		box-sizing: border-box;
		/* background-color: white; */

		/* margin: 30upx; */
	}

	.personLists .adress {

		display: flex;
	}

	.personLists .adress .location {
		margin-left: 2%;
	}

	.perListsTop {
		display: flex;
		flex-grow: 2;
		/* flex-direction: column; */

		/* border-bottom: 1px solid #f2f2f2; */
	}

	.perListsTop image {
		width: 100%;
		height: 100upx;
		border-radius: 100%;
	}

	.personLists .setting {
		margin-left: 6%;
	}

	.perListsTop .info {
		color: #555555;
		margin-left: 4%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.perListsTop .info .name {
		font-size: 20px;
		font-weight: bold;
		/* line-height: 22px;
		height: 50%; */
		color: #ffffff;
	}

	.perListsTop .info .time {
		color: #634629;
	}

	.protect {
		background-color: #f3f3f3;
	}

	.head {
		width: 750upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.head:first-child {
		background-color: #108ee9;
	}

	.head:nth-child(2) {
		background-color: #ffffff;
		margin-top: 10upx;
	}
</style>
